<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01 - OL4加载天津国展WMTS服务展示地图 - 3857</title>
    <script src="../lib/ol4/ol4.js"></script>
    <script src="../lib/proj4/proj4.js"></script>
    <link rel="stylesheet" href="../css/ol4/ol.css">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div id="map"></div>
</body>
<script>
    const projection = ol.proj.get('EPSG:3857');
    projection.setExtent([1.3066357343178108E7, 4724634.122808726, 1.30665977989508E7, 4724851.153702234]);
    const projectionExtent = projection.getExtent();
    // console.log(projectionExtent);
    const centerX = (projectionExtent[0] + projectionExtent[2]) * 0.5;
    const centerY = (projectionExtent[1] + projectionExtent[3]) * 0.5;
    // const tileSize = 256;

    const origin = [1.3066357343178108E7, 4724851.153702234];
    // console.log('origin:', origin);

    // const size = ol.extent.getWidth(projectionExtent) / tileSize;

    const resolutions = [0.939280362078125, 0.4696401810390625, 0.23482009051953126, 0.11741004525976563, 0.058705022629882815, 0.029352511314941408, 0.014676255657470704, 0.007338127828735352, 0.003669063914367676, 0.001834531957183838, 9.17265978591919E-4, 4.586329892959595E-4, 2.2931649464797975E-4, 1.1465824732398987E-4, 5.732912366199494E-5, 2.866456183099747E-5, 1.4332280915498734E-5];
    const matrixIds = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];


    const tileGrid = new ol.tilegrid.WMTS({
        origin,
        resolutions: resolutions,
        extent: projectionExtent,
        matrixIds: matrixIds
    });

    // const url = `https://gis.ncectj.com:9791/iserver/services/map-TJGZ_wmts/wmts100`;
    const url = `https://gis.necctj.com:9790/iserver/services/map-TJGZ_wmts/wmts100`;

    const wmtsSource = new ol.source.WMTS({
        url,
        layer: 'A13_F01',
        matrixSet: 'Custom_A13_F01',
        format: 'image/png',
        projection: projection,
        tileGrid: tileGrid,
        style: 'default',
        wrapX: false
    });
    // 图层
    const baseLayer = new ol.layer.Tile({
        source: wmtsSource
    });

    // debugger

    // const circlePoint = ol.proj.transform([116.384722, 39.889916], 'EPSG:4326', 'EPSG:3857');
    // console.log(circlePoint);
    // const centerPoint = [13065672.694715071, 4725493.712224566];
    const centerPoint = [centerX, centerY];
    // console.log('centerPoint:', centerPoint);
    // 117.37816511692118, 39.02143653955417
    console.log(ol.proj.toLonLat(centerPoint));

    const iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(centerPoint)
    });

    const iconStyle = new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [10, 26],
            anchorXUnits: 'pixels',
            anchorYUnits: 'pixels',
            src: '../image/position_orange.png'
        })
    });

    iconFeature.setStyle(iconStyle);

    const vectorSource = new ol.source.Vector({
        features: [iconFeature],
        wrapX: false
    });

    const iconLayer = new ol.layer.Vector({
        source: vectorSource
    });

    const map = new ol.Map({
        layers: [
            baseLayer,
            iconLayer
        ],
        target: 'map',
        view: new ol.View({
            center: centerPoint,
            projection,
            zoom: 2,
            maxZoom: 19,
            minZoom: 1,
            resolutions
        })
    });
    // console.log(ol.proj.transform([117.36935115099716, 39.02777214997664], 'EPSG:4326', 'EPSG:3857'));
    /*setTimeout(() => {
        map.getView().animate({
            // center:[13065672.694715071,-6616576.019451665],
            zoom: 4,
            center: [13065496.404865922, 4725650.475865663],
            duration: 300
        });
    }, 2000);*/
</script>
</html>